<template>
  <view class="order-card">
    <view class="order-card__header">
      <slot name="header"></slot>
    </view>

    <view class="order-card__body">
      <slot name="body"></slot>
    </view>
  </view>
</template>

<script>
import Top from "./Top.vue";
import DateInfo from "./DateInfo.vue";
import GoodsInfo from "./GoodsInfo.vue";
import ReceiptInfo from "./ReceiptInfo.vue";
import Remark from "./Remark.vue";
import Total from "./Total.vue";
import OrderNo from "./OrderNo.vue";
import { orderData } from "../../../utils/printerData";
import { orderStatus } from "../../../config/status";
import { mapActions } from "vuex";
export default {
  components: {
    Top,
    DateInfo,
    GoodsInfo,
    ReceiptInfo,
    Remark,
    Total,
    OrderNo
  },
  props: {
    data: {
      type: Object,
      default() {
        return {
          tableNo: "", //"13桌",
          createdAt: "", // "2020-05-06",
          status: "", // 2,
          orderGoods: [
            // {
            //   id: 105,
            //   orderId: 83,
            //   skuId: 44,
            //   num: 1,
            //   title: "鱼香肉丝",
            //   price: "16.78",
            //   spec: [
            //     {
            //       key: "分量",
            //       value: "大份"
            //     }
            //   ],
            //   props: [
            //     {
            //       k: "辣度",
            //       v: ["辣"],
            //       id: "辣度辣"
            //     }
            //   ]
            // }
          ],
          buyerRemark: "", //"这是备注",
          total: "" //"15.20"
        };
      }
    }
  },
  data() {
    return {
      showMore: false, // 是否展示更多
      orderStatus: orderStatus // 订单状态
    };
  },
  computed: {
    totalNum() {
      let a = 0;
      this.data.orderGoods.forEach(v => {
        a = a + v.num;
      });
      return a;
    },
    // 桌台及区域名
    areaName() {
      return this.data.tableInfo.groupName + " " + this.data.tableInfo.tableNo;
    }
  },
  methods: {
    ...mapActions({
      socketPrint: "socketPrint"
    }),
    printer() {
      this.socketPrint(this.data);
    }
  }
};
</script>

<style scoped lang="scss">
$padding-left: 40rpx;
$padding-top: 20rpx;
$font-size-base: $uni-font-size-lg;
$font-size-ms: $uni-font-size-base;
.order-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  // overflow: hidden;
  font-size: $font-size-base;
  // box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  // .order-card__top {
  //   // background-color: $uni-color-primary;
  //   padding: 30rpx $padding-left;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   .table-info {
  //     font-weight: 600;
  //     font-size: 34rpx;
  //   }
  //   .status-info {
  //     color: $uni-text-color-grey;
  //     font-size: $font-size-base;
  //   }
  // }
  .order-card__header {
    padding: $padding-left $padding-left $padding-left $padding-left;
  }
  .order-card__body {
    padding: 0 $padding-left $padding-left $padding-left;
  }
  .order-card__date-wrap,
  .order-card__receipt-wrap,
  .order-card__goods-wrap,
  .order-card__total-wrap,
  .order-card__no-wrap {
    margin-bottom: 24rpx;
  }

  .order-card__footer-wrap {
    margin-top: 24rpx;
    overflow: hidden;
    .printer-btn {
      float: right;
    }
  }
}
</style>
